<template>
    <div class="detail-container">
      <main class="content-wrapper">
        <h1 class="act-title">{{ actDetail.name }}</h1>
        <div class="meta-info">
          <time class="publish-time">发布时间：{{ actDetail.createTime }}</time>
          <span class="separator">|</span>
          <span class="publisher">发布人：{{ actDetail.publisher }}</span>
        </div>
  
        <article class="article-content">
          <template v-for="index in 6">
            <!-- 段落内容 -->
            <p 
              v-if="actDetail[`content${index}`]" 
              :key="`content-${index}`"
              class="content-paragraph"
            >
              {{ actDetail[`content${index}`] }}
            </p>
  
            <!-- 对应图片 -->
            <figure 
              v-if="actDetail[`image${index}`]" 
              :key="`image-${index}`"
              class="image-container"
            >
              <el-image 
                class="article-image"
                :src="actDetail[`image${index}`]"
                fit="cover"
              >
                <div slot="error" class="image-error">
                  <i class="el-icon-picture-outline"></i>
                  <p>图片加载失败</p>
                </div>
              </el-image>
            </figure>
          </template>
        </article>
      </main>
    </div>
  </template>
  
  <script>
  import axios from 'axios'

  
  export default {
    data() {
      return {
        actDetail: {
          // 初始化数据结构
          content1: '',
          content2: '',
          content3: '',
          content4: '',
          content5: '',
          content6: '',
          image1: '',
          image2: '',
          image3: '',
          image4: '',
          image5: '',
          image6: ''
        }
      }
    },
    mounted() {
      this.activityDetail();
    },
    methods: {
      async activityDetail() {
        try {
          const id = this.$route.params.id;
          const res = await axios.get(`http://localhost:8080/ActDetail/${id}`);
          if (res.data.code == 1) {
            this.actDetail = res.data.data
          }
        } catch (error) {
          console.error('获取详情失败:', error);
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .detail-container {
    background-color: #f8f9fa;
    min-height: 100vh;
  }
  
  .content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
  
  .act-title {
    font-size: 2.2rem;
    color: #333;
    text-align: center;
    margin: 1.5rem 0;
    line-height: 1.3;
    font-weight: 600;
  }
  
  .meta-info {
    text-align: center;
    color: #666;
    margin-bottom: 2rem;
    font-size: 0.9rem;
  }
  
  .separator {
    margin: 0 12px;
    color: #ddd;
  }
  
  .article-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
  }
  
  .content-paragraph {
    margin: 1.5rem 0;
    text-indent: 2em;
  }
  
  .image-container {
    margin: 2rem 0;
    text-align: center;
  }
  
  .article-image {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }
  
  .article-image:hover {
    transform: translateY(-3px);
  }
  
  .image-error {
    padding: 2rem;
    background: #f5f7fa;
    border-radius: 8px;
    color: #909399;
  }
  
  .image-error i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }
  
  @media (max-width: 768px) {
    .content-wrapper {
      padding: 20px 15px;
    }
    
    .act-title {
      font-size: 1.8rem;
    }
    
    .article-content {
      font-size: 0.95rem;
    }
  }
  
  .content-paragraph + .image-container {
    margin-top: 1.5rem;
  }
  
  .image-container + .content-paragraph {
    margin-top: 2rem;
  }
  </style>